<template>
	<div class="landing">
		<div class="sreePublic">
			<div id="" style="text-align: center;">
				<em class="iconfont" @click="vfun_back">&#xe61f;</em>
			</div>
			登录
		</div>
		<div class="form">
			<ul>
				<li class="liborder">
					<div class="divEm">账号</div>
					<div class="divInput"><input placeholder="请输入手机号" v-model="loginNo" /></div>
				</li>
				<li class="liborder">
					<div class="divEm">密码</div>
					<div class="divInput">
						<input type="password" ref="password" placeholder="请输入密码" v-model="password" @keyup="vfun_pass" />
					</div>
					<a @click="vfun_yan">
						<em class="iconfont" v-if="vue_yan">&#xe6e3;</em>
						<em class="iconfont" v-else>&#xe8ed;</em>
					</a>
				</li>
				<li class="libutton">
					<a class="landBtn" :class="{activeNo:vue_dislabe}" @click="landing">登录</a>
				</li>
				<li class="lirouter">
					<router-link to="reg">快速注册</router-link>
					<a>
						<em class="iconfont" @click="weixinLogin">&#xe60f;</em> 微信登录
					</a>
					<router-link to="forgetPassword">忘记密码</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'; //引入弹框
	import { MessageBox } from 'mint-ui';
	export default {
		name: 'landing',
		data() {
			return {
				loginNo: '',
				password: '',
				vue_yan: true,
				vue_dislabe: true,
				vue_urlNow: window.location.href,
			}
		},
		methods: {
			landing() {
				var str = this.Public.rules.phone;
				if(str.test(this.loginNo) != true) {
					Toast({
						message: '手机号格式错误',
						iconClass: 'fontSize iconfont icon-shibai'
					});
					return false;
				}
				this.axios({
					method: 'GET',
					url: "/v3/member/appLogin",
					params: {
						"loginNo": this.loginNo,
						"password": this.md5(this.password).toUpperCase(),
					}
				}).then((res) => {
					Toast({
						message: '登录成功',
						iconClass: 'fontSize iconfont icon-chenggong',
						duration: 1000
					});
					localStorage.setItem("memberCode", res.data.memberCode);
					this.$router.push({path:"/my"})
				}).catch((err) => {
					Toast({
						message: err.response.data,
						iconClass: 'fontSize iconfont icon-shibai'
					});
				});
			},
			vfun_pass() {
				if(this.$refs['password'].value.length >= 6) {
					this.vue_dislabe = false;
				} else {
					this.vue_dislabe = true;
				}
			},
			vfun_yan() {
				this.vue_yan = !this.vue_yan;
				if(this.vue_yan) {
					this.$refs['password'].type = "password";
				} else {
					this.$refs['password'].type = "text";
				}
			},
			vfun_back() {
				this.$router.push({path:"/index"})
			},
			weixinLogin() {
				this.axios({
					method: 'GET',
					url: "/v3/weixin/users/makeWeixinCodeRequestUrl",
					params: {
					}
				}).then((res) => {
					//直接访问服务端返回的获取code的请求URL
					window.location.href = res.data;
				}).catch((err) => {
					Toast({
						message: err.response.data,
						iconClass: 'fontSize iconfont icon-shibai'
					});
				});
			},
		},
		mounted() {
			var weixinLoginCode = "";
			if(this.vue_urlNow.indexOf("?code=") != -1) { //如果是微信登录，则链接中包含"?code="
				//如果是微信登录，则链接中包含"?code="
				var firstQue = this.vue_urlNow.indexOf("?");
				var rootUrl = this.vue_urlNow.substr(0, firstQue);
				this.vue_urlNow = this.vue_urlNow.substr(firstQue + 1); //取得所有参数   stringvar.substr(start [, length ]
				var secondQue = this.vue_urlNow.indexOf("?");
				var cmemberCodeAndJsessionId = this.vue_urlNow.substr(secondQue + 13); //过滤掉?cmemberCode=
				var thirdSplit = cmemberCodeAndJsessionId.indexOf("&");
				var cmemberCode = cmemberCodeAndJsessionId.substr(0, thirdSplit); //过滤掉?cmemberCode=
				var jsessionId = cmemberCodeAndJsessionId.substr(thirdSplit + 12);
				rootUrl = rootUrl.replace("//www.", "//" + cmemberCode + ".");
				var arr = this.vue_urlNow.split("&"); //各个参数放到数组里
				var par = arr[0];
				var num2 = par.indexOf("=");
				weixinLoginCode = par.substring(num2 + 1, par.length);

				//微信登录
				if(weixinLoginCode != "" && weixinLoginCode != undefined) { //微信登录
					this.axios({
						method: 'GET',
						url: rootUrl + "/v3/weixin/users/loadWeixinUserInfo", //通过微信code来获取交易系统的memberCode，若不存在则服务端自动创建
						params: {
							"weixinCode": weixinLoginCode,
							"jsessionId": jsessionId
						}
					}).then((res) => {
						localStorage.setItem("memberCode", res.data.memberCode);
						window.location.href = rootUrl + "#/my?memberCode=" + res.data.memberCode;
					}).catch((err) => {
						Toast({
							message: '微信登录失败，请联系客服',
							iconClass: 'fontSize iconfont icon-chenggong'
						});
						window.location.href = rootUrl + "#/landing"
					});
				}
			}
		},

	}
</script>

<style scoped>
	.form {
		margin-top: 2.3rem;
	}

	.form li {
		width: 90%;
		margin-left: 5%;
		clear: both;
		display: -webkit-box;
		color: #4b4b4b;
		font-size: 16px;
	}

	.liborder {
		border-bottom: 1px solid #e7e7e7;
		padding: 0.2rem 0;
	}

	.liborder em {
		color: #b8b8b8;
	}

	.liborder a {
		position: relative;
		top: 0.15rem;
	}

	.divEm {
		height: 1rem;
		width: 1rem;
		line-height: 1rem;
		text-align: center;
	}

	.divInput {
		font-size: 14px;
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
	}

	.divInput input {
		border: 0;
		box-sizing: border-box;
		height: 1rem;
		width: 100%;
		text-indent: 0.2rem;
		font-size: 16px;
		color: #4b4b4b;
	}

	.landBtn {
		display: block;
		text-align: center;
		width: 100%;
		height: 1.2rem;
		box-sizing: border-box;
		line-height: 1.2rem;
		font-size: 16px;
		border-radius: 4px;
		background: #D50B0A;
		color: #fff;
	}

	.libutton {
		height: 1.5rem!important;
		margin-top: 0.8rem;
	}

	.lirouter {
		display: -webkit-box;
		/*padding-top: 0.5rem;*/
	}

	.lirouter a {
		display: block;
		-webkit-box-flex: 1;
		text-align: center;
		color: #6e6e6e;
	}

	.lirouter a:first-child {
		text-align: left;
	}

	.lirouter a:last-child {
		text-align: right;
	}

	.lirouter a em {
		display: block;
		font-size: 1rem;
		color: #35cd35;
		position: relative;
		/*top: -0.6rem;*/
	}

	.activeNo {
		pointer-events: none;
		background: #EEEEEE;
		color: #d4d4d4;
	}
</style>
